<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>Flex align-content 效果验证</title>
    <style>
      /* 基础样式，只看效果可忽略 */
      body {
        margin: 0;
        font: 14px/1.4 sans-serif;
        background: #f7f7f7;
      }
      h2 {
        margin: 20px 0 6px 10px;
        font-size: 16px;
        color: #333;
      }

      /* 核心：多行 Flex 容器 */
      .box {
        display: flex; /* 开启 flex */
        /* 必须换行，否则永远只有一行，align-content 无效 */
        flex-wrap: wrap; 

        width: 360px;
        height: 360px;
        margin: 10px;
        border: 3px solid #000;
        background: #fff;

        resize: both;
        overflow: hidden; /* 可拖动右下角改变尺寸，实时看效果 */
        align-content: flex-start; /* 默认先演示 flex-start，手动改下面 6 个值验证 */
      }

      /* 子项 */
      .item {
        width: 80px;
        height: 60px;
        margin: 5px;
        background: #4caf50;
        color: #fff;

        /* display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px; */
      }

      /* 6 种取值快速切换（把下面注释打开/关闭即可） */
      .ac-start {
        align-content: flex-start;
      }
      .ac-end {
        align-content: flex-end;
      }
      .ac-center {
        align-content: center;
      }
      .ac-between {
        align-content: space-between;
      }
      .ac-around {
        align-content: space-around;
      }
      .ac-evenly {
        align-content: space-evenly;
      }
    </style>
  </head>
  <body>
    <h2>align-content:flex-start（默认）</h2>
    <div class="box ac-start">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

    <h2>align-content:flex-end</h2>
    <div class="box ac-end">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

    <h2>align-content:center</h2>
    <div class="box ac-center">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

    <h2>align-content:space-between</h2>
    <div class="box ac-between">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

    <h2>align-content:space-around</h2>
    <div class="box ac-around">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>

    <h2>align-content:space-evenly</h2>
    <div class="box ac-evenly">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>
